import { Calendar, type CalendarProps } from "antd";
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import { useEffect, useState } from "react";
import { HolidayUtil, Lunar } from 'lunar-typescript';
import style from './index.module.css'
import classNames from 'classnames'
import { listTask } from "@/api/task";
import TaskListView from "./component";
import { List } from "echarts";


const TaskView: React.FC = () => {
  const [selectDate, setSelectDate] = useState<Dayjs>(dayjs());
  const [panelDateDate, setPanelDate] = useState<Dayjs>(dayjs());

  const [taskList, setTaskList] = useState([])
  useEffect(() => {
    getList(selectDate.format('YYYY-MM-DD HH:MM:ss'))
  }, [selectDate])
  /**
   * 
   * @param newValue 选择日期
   * @param selectInfo 
   */
  const onSelect: CalendarProps<Dayjs>['onSelect'] = (newValue: Dayjs, selectInfo) => {
    if (selectInfo.source === 'date') {
      setSelectDate(newValue);
    }
  };
  /**
   * 查询列表
   * @param dateData 
   */
  function getList(dateData?:string) {
    const queryParams = {
      startTime: dateData
    }
    listTask(queryParams).then((res: any) => {
      setTaskList(res.data)
      console.log("taskList",taskList)
    });
  }
  /**
   * 
   * @param newValue 面板改变
   */
  const onPanelChange = (newValue: Dayjs) => {
    setPanelDate(newValue);
  };
  /**
   * 
   * @param current 重新定义面板
   * @param info 
   * @returns 
   */
  const cellRender: CalendarProps<Dayjs>['cellRender'] = (current, info) => {
    const d = Lunar.fromDate(current.toDate());
    const lunar = d.getDayInChinese();//初几
    const solarTerm = d.getJieQi();//节气

    const h = HolidayUtil.getHoliday(current.get('year'), current.get('month') + 1, current.get('date'));
    const isWork = h?.isWork() === true ? "班" : h?.isWork() === false ? "休" : null;//是否调休
    const displayHoliday = h?.getTarget() === h?.getDay() ? h?.getName() : undefined;//节日
    if (info.type == "date") {
      return (<div className={classNames(style.SelectDataClass, { [style.SelectDataColorClass]: selectDate.isSame(current, 'date') })}>
        {/* 公历 */}
        <div className={style.DateClass}>{current.get("date")}</div>
        {/* 农历 */}
        <div className={style.lunarClass}> {displayHoliday || solarTerm || lunar}</div>
        {/* 是否调休和假日休息 */}
        <div className={style.isWorkClass}> {isWork}</div>
        {/* 假期 */}
      </div>);
    }
    if (info.type == 'month') {
      const d2 = Lunar.fromDate(new Date(current.get('year'), current.get('month')));
      const month = d2.getMonthInChinese();


      return (<div
        className={classNames(style.SelectDataClass, { [style.SelectDataColorClass]: panelDateDate.isSame(current, 'month') })}  >
        <div className={style.MounthClass}>  {current.get('month') + 1}月（{month}月）</div>
      </div>)
    }
  }

  return (
    <div >
      <Calendar  defaultValue={selectDate} fullscreen={false} fullCellRender={cellRender} onSelect={onSelect} onPanelChange={onPanelChange} />
      <TaskListView
       list={taskList} 
       startTime={selectDate.format('YYYY-MM-DD HH:MM:ss')} 
       handleCancle={()=>{getList(selectDate.format('YYYY-MM-DD HH:MM:ss'))}}
       />
    </div>
  )

}
export default TaskView;